<template>
  <div class="site-aside-container">
    <Avatar :url="url" />
    <div class="title">{{ data && data.siteTitle }}</div>
    <Menu />
    <Contact />
    <p class="footer">{{ data && data.icp }}</p>
  </div>
</template>

<script>
import Avatar from "@/components/Avatar";
import Contact from "@/components/SiteAside/Contact";
import Menu from "@/components/SiteAside/Menu";
import { mapState } from "vuex";
export default {
  components: { Avatar, Contact, Menu },
  data: () => ({
    url:
      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fupload-images.jianshu.io%2Fupload_images%2F7275569-309e8a95a49c6191.jpg&refer=http%3A%2F%2Fupload-images.jianshu.io&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619490432&t=250ff0212eb3c0fe87621a11b415ce34",
  }),
  computed: {
    ...mapState("setting", ["data"]),
  },
};
</script>

<style lang='less' scoped>
@import "~@/assets/style/var.less";
.site-aside-container {
  width: 100%;
  height: 100%;
  background: @dark;
  padding: 20px 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  .avatar-container {
    margin: auto;
  }
  .title {
    font-size: 1.2em;
    color: #fff;
    text-align: center;
    padding: 10px 0;
  }
  .footer {
    text-align: center;
    font-size: 12px;
  }
}
</style>
